<!DCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>CIA Test</title>
        <!--Bootstrap 核心 CSS 文件，基于国内云厂商的免费 CDN 加速服务-->
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="panel panel-primary" style="width:50%;margin-left:auto;margin-right:auto;">
                <div class="panel-body">
                    <legend>CIA电话验证</legend>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="phoneNumber" class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-10">
                                <input type="text" name="number" id="number" class="form-control" placeholder="请输入手机号" style="width:80%;"></input>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="button" class="btn btn-default" value="获取验证码" onclick="getCode()"></input>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-10">
                                <input type="text" name="authenticateCode" id="authenticateCode" class="form-control" placeholder="未接来电后四位" style="width:80%;"></input>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="button" class="btn btn-default" value="注册" onclick="Authenticate()"></input>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
    <!-- jQuery文件。-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件。-->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        //定义全局变量，用来保存验证码
    var result;
    function getCode(){
        //从input 输入框获取输入的手机号
        var number = document.getElementById("number").value;
        //将手机号AJAX POST 到PHP 实现的后台程序，将返回的验证码赋值给result
        $.post('agent.php',{'number':number},function(data){
                alert("发送成功！");
                result = data;
                });
    }

function Authenticate()
{
    //从input输入框获取输入的验证码
    var code = document.getElementById("authenticateCode").value;
    //验证获取的验证码是否正确
    if(code === result){
        alert("注册成功");
    }else{
        alert("注册失败");
    }
}


    </script>
</html>

